<!DOCTYPE html>
<html>
    <head ms-controller="head-vm">
        <title>测试</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="../../dist/avalon.js"></script>
        <style>
            .selected{
                background:red;
            }
            .hover{
                border: 1px solid #a9ea00
            }
        </style>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            avalon.component('ms-select', {
                template: heredoc(function () {
                    /*
                     <dropdown>
                     <ul>
                     <li :for="($index,el) in @array" 
                     :click="@onClick($index)"
                     :class="{selected: $index == @selected}" >
                     {{el}}
                     </li>
                     </ul>
                     </dropdown>
                     */
                }),
                defaults: {
                    array: [1, 2, 3, 4],
                    selected: 2,
                    onClick: function (i) {
                        this.selected = i
                    }
                }
            })

            var vm = avalon.define({
                $id: 'widget'

            })
        </script>
    </head>

    <body>
        <h1>列表组件</h1>
        <p>组件容器中定义的普通属性与绑定属性,会出现在新生成的组件中去</p>

        <p>大家可以在chrome控制台下看到新生成的dropdown元素拥有wid, is, class, style属性时,
            移上去时ms-hover指令还会起作用
        </p>
        <div id="box" ms-controller='widget' >

            <xmp ms-widget="[{is:'ms-select',$id:'dropdown'}]" 
                 ms-hover="'hover'" style="width:400px;display: inline-block" class='class'>55</xmp>
        </div>
    </body>
</html>